<template>
  <div class="goubibibi">
      
      <div class="menulistpus">
          <div class="hopnmlpu">
                <div class="hopllp">
                        <van-nav-bar :title="title"  left-arrow  @click-left="onClickLeft"
                        @click-right="onClickRight">
                            <template #right>
                                <van-icon name="search" size="18" />
                            </template>
                        </van-nav-bar>
                </div>
          </div>
          <van-loading size="24px" vertical class="jijiaaiaai" v-if="recommendseeklis=='' ">加载中...</van-loading>
          <div class="menulist">
                <div class="seektosgoto" >
                    <div class="relisstos">
                        <div class="itemto" v-if="recommendseeklis !=''">
                            <div class="headline hop">
                                 <div class="se tr">
                                     <span>
                                         最佳匹配
                                     </span>
                                 </div>
                                 <div class="se rto">
                                     <!-- <span class="iconfont icon-shanchu"></span> -->
                                 </div>
                             </div>
                            <div class="items" v-for="(item) in recommendseeklis" :key="item.id">
                                <div class="img" @click="gottodetail(item.id)">
                                    <img :src="item.img" alt="">
                                </div>
                                <div class="right">
                                     <div class="tile">
                                         <h2 class="recipe-name text-clamp">{{item.n}}</h2> 
                                         <div class="recipe-cai text-lips">{{item.cookstory}}</div>     
                                     </div>
                                     <div class="recipe-auth">{{item.an}}</div>
                                     <div class="recipe-other">
                                         <span class="iconfont icon-yanjing"></span>
                                         <span>{{item.ph}}</span>
                                         <span class="iconfont icon-shoucang1"></span>
                                         <span>{{item.pw}}</span>
                                     </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
          </div>
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { NavBar,Icon } from 'vant';
Vue.use(NavBar).use(Icon);

import {getseek} from '../../api/seek'
export default {
    data(){
        return{
            recommendseeklis:[
                // {
                //     n:"手撕包菜",
                //     img:"https://cp1.douguo.com/upload/caiku/1/4/3/260x220_14e009a663a982096902f7085985d073.jpeg",
                //     cookstory:"包菜 油 盐 干辣椒 大蒜头 醋 生抽 蚝油 白糖",
                //     an:"jmy的私房菜",
                //     ph:"30125334",
                //     pw:"114371",
                //     id:1

                // },
                // {
                //     an: "紫色透明",
                //     cookstory: " 为牛年量身定做了一道热乎乎的过年菜，炖一锅红烩牛肉，牛年开运，大吉大利。  祝大家牛年牛气冲天，牛运亨通。",
                //     id: 3060882,
                //     img: "https://cp1.douguo.com/upload/caiku/3/4/9/600_34139e882835863762423120e28e66b9.jpeg",
                //     n: " 红烩牛肉 牛年开运菜",
                //     ph: 721,
                //     pw: 1080,
                // },
               
            ],//搜素推荐
            keyword:"",
            title:"",
            recommendseeklisdata:'',//搜素菜谱
        }
    },
    methods:{
        getmenuilst(){
            getseek({keyword:this.keyword}).then(data=>{
                console.log("菜谱的",data);
                this.recommendseeklisdata = data ;
                this.recommendseeklisdata.result.list.forEach(ele => {
                    if(ele.r){
                        let datatos = new Set([ele.r])
                        for (let e of datatos) {
                                let {id,a,n,ph,pw,cookstory,an,img} =e;
                                let data = {
                                    id:id,
                                    a:a,
                                    n:n,
                                    ph:ph,
                                    pw:pw,
                                    cookstory:cookstory,
                                    an:an,
                                    img:img
                                } 
                            console.log("活动",data)
                            this.recommendseeklis.push(data);
                        }
                        
                    }
               });
            })
        },
        getdatatomanlist(){
            let menuilst = JSON.parse(sessionStorage.getItem('menuilst'));//取数据
            // console.log(menuilst);
            this.keyword = menuilst ;
            this.title = menuilst
            this.getmenuilst();
        },
        onClickLeft(){
            this.$router.go(-1);
        },
        onClickRight(){
            this.$router.push("/seek");
        },
        //跳到菜谱详情
        gottodetail(id){
            let detail = id;//detail   // console.log(asdto)item_id: 3160559
            console.log(id);
            console.log("detail",detail)
            window.sessionStorage.setItem('detail',JSON.stringify(detail));//存数据
            // this.$router.push('/detail')
            this.$router.push({name:"detail",params:{data:detail }})
        },
    },
    created(){
        this.getdatatomanlist();
    }

}
</script>

<style lang="less">
    .menulistpus{
        width:100%;
        height: 100%;
        position: fixed;
        overflow-y: scroll;
        z-index: 99;
        background-color: #fff;
        .hopnmlpu{
            width: 100%;
            height: 40px;
        }
        .hopllp{
            width: 100%;
            height: 40px;
            position: fixed;
            z-index: 90;
            background-color: #fff;
            top: 0;
            left: 0;
            .van-nav-bar__content{
                i{
                    color: #000;
                }
            }
        }
        .menulist{
            width: 100%;
            margin-top: 10px;
            padding: 10px;
            box-sizing: border-box;
            // position: relative;
            
            // overflow-x: hidden;
            .seektosgoto{
                .headline{
                    width: 100%;
                    height: 30px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .se{
                        width: 10%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                    }
                    .rto{
                        justify-content: flex-end;
                        span{
                            &.iconfont{
                                font-size: 18px;
                            }
                        }
                    }
                    .tr{
                        width: 25%;
                        span{
                            font-size: 14px;
                            font-weight: 600;
                        }
                    }
                }
                 .hop{
                    margin-top: 0px;
                }
                 .relisstos{
                    width: 100%;
                    margin-top: 0px;
                    .itemto{
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-wrap: wrap;
                        .items{
                            width: 100%;
                            height: 100px;
                            margin-top: 10px;
                            margin-bottom: 10px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            .img{
                                width: 50%;
                                height: 100%;
                                border-radius: 8px;
                                overflow: hidden;
                                img{
                                    width: 100%;
                                    margin: auto;
                                }
                            }
                            .right{
                                width: 50%;
                                height: 100%;
                                padding: 10px;
                                position: relative;
                                .tile{
                                    width: 100%;
                                    height: 52px;
                                    overflow: hidden;
                                    .recipe-name {
                                        font-size: 16px;
                                        line-height: 26px;
                                        color: #333;
                                        font-weight: bold;
                                    }
                                    .text-clamp {
                                        word-break: break-all;
                                        text-overflow: ellipsis;
                                        display: -webkit-box;
                                        -webkit-line-clamp: 2;
                                        -webkit-box-orient: vertical;
                                        overflow: hidden;
                                    }
                                    .recipe-cai {
                                        font-size: 12px;
                                        line-height: 26px;
                                        color: #9293AE;
                                    }
                                    .text-lips {
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        overflow: hidden;
                                    }
                                }
                                .recipe-auth {
                                    font-size: 10px;
                                    height: 15px;
                                    overflow: hidden;
                                    line-height: 15px;
                                    color: #8c8c8c;
                                }
                                .recipe-other{
                                    position: absolute;
                                    bottom: 10px;
                                    color: #8c8c8c;
                                    span{
                                        font-size: 10px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .goubibibi{
          position: absolute;
        width: 100%;
        height: 100%;
        background-color: #ffff;
        z-index: 999;
    }
     .jijiaaiaai{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -24px;
            margin-top: -24px;
            z-index: 99;
            
        }
</style>